{% extends 'base.html' %}
{% load staticfiles %}
{% block content_block %}
<div class="single">

<div class="container">
<div class="col-md-9">
	<div class="col-md-5 grid">		
		<div class="flexslider">
			  <ul class="slides">
			    <li data-thumb="{{ MEDIA_URL }}{{ clo.image_url_l }}">
			        <div class="thumb-image"> <img src="{{ MEDIA_URL }}{{ clo.image_url_l }}" data-imagezoom="true" class="img-responsive"> </div>
			    </li>
			    <li data-thumb="{{ MEDIA_URL }}{{ clo.image_url_m }}">
			         <div class="thumb-image"> <img src="{{ MEDIA_URL }}{{ clo.image_url_m }}" data-imagezoom="true" class="img-responsive"> </div>
			    </li>
			    <li data-thumb="{{ MEDIA_URL }}{{ clo.image_url_r }}">
			       <div class="thumb-image"> <img src="{{ MEDIA_URL }}{{ clo.image_url_r }}" data-imagezoom="true" class="img-responsive"> </div>
			    </li> 
			  </ul>
		</div>
	</div>	
<div class="col-md-7 single-top-in">
						<div class="single-para simpleCart_shelfItem">
							<h1>{{ clo.name }}</h1>
							<p>{{ clo.desc }}</p>
							<div class="star-on">
{#								<div class="review">#}
{#									<a href="#"> 3 reviews </a>/#}
{#									<a href="#">  Write a review</a>#}
{#								</div>#}
							<div class="clearfix"> </div>
							</div>
                                {% if clo.old_price == clo.new_price%}
                                    <label  class="add-to item_price">现价{{ clo.new_price }}元</label>
                                {% else %}
							    <label  class="add-to item_price" style="text-decoration:line-through">原价{{ clo.old_price }}元</label>
                                <label  class="add-to item_price">现价{{ clo.new_price }}元</label>
								{% endif %}
							<div class="available">
								<h6>尺寸</h6>
								<ul>
									
								<li>Size:<select>
                                    {% for s in clo.size.all %}
									<option>{{ s.name }}</option>
                                    {% endfor %}
								</select></li>
							</ul>
						</div>
{#								<a href="#" class="cart item_add">放入购物车</a>#}
                        <form action="{% url 'add_cart'%}" method="post" id="subform{{ clo.id }}">
                            {% csrf_token %}
                            <input type="hidden" name="chid" value="{{ clo.id }}">
                            <a href="#" class="cart item_add" onclick="document.getElementById('subform{{ clo.id }}').submit();">放入购物车</a>
                         </form>
						</div>
					</div>
			<div class="clearfix"> </div>
</div>
<!----->
        {% include 'pro_right.html' %}
		<div class="clearfix"> </div>
	</div>
	</div>
<!-- slide -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/imagezoom.js' %}"></script>
<!-- start menu -->
<link href="{% static 'css/memenu.css' %}" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="{% static 'js/memenu.js' %}"></script>
<script>$(document).ready(function(){$(".memenu").memenu();});</script>
<script src="{% static 'js/simpleCart.min.js' %}"> </script>
<!--initiate accordion-->
						<script type="text/javascript">
							$(function() {
							    var menu_ul = $('.menu-drop > li > ul'),
							           menu_a  = $('.menu-drop > li > a');
							    menu_ul.hide();
							    menu_a.click(function(e) {
							        e.preventDefault();
							        if(!$(this).hasClass('active')) {
							            menu_a.removeClass('active');
							            menu_ul.filter(':visible').slideUp('normal');
							            $(this).addClass('active').next().stop(true,true).slideDown('normal');
							        } else {
							            $(this).removeClass('active');
							            $(this).next().stop(true,true).slideUp('normal');
							        }
							    });
							
							});
						</script>
						<!-- FlexSlider -->
  <script defer src="{% static 'js/jquery.flexslider.js' %}"></script>
<link rel="stylesheet" href="{% static 'css/flexslider.css' %}" type="text/css" media="screen" />

<script>
// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    controlNav: "thumbnails"
  });
});
</script>
<!---pop-up-box---->
					<link href="{% static 'css/popuo-box.css' %}" rel="stylesheet" type="text/css" media="all"/>
					<script src="{% static 'js/jquery.magnific-popup.js' %}" type="text/javascript"></script>
					<!---//pop-up-box---->
					 <script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
																						
						});
				</script>
{% endblock %}